<style>
    .tab-content > .chart {
        padding: 10px;
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <ul class="nav nav-tabs" id="selectdate">
        <li class="{:$Think.get.status === null ? 'active' : ''}" data-times="0"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="timeList" item="vo"}
            <li class="{:$Think.get.status === (string)$key ? 'active' : ''}" data-times="{$key}"><a href="#t-{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>
        <input type="hidden" id="example_times" value="0">
    </div>
</div>
<div style="padding: 2% 0 2% 0;background-color: #fff;">
    <form class="form-horizontal form-commonsearch nice-validator n-default n-bootstrap" novalidate="" method="post" action="" id="">
        <div style="overflow: hidden;">
            <div class="col-xs-5">
                <input type="hidden" class="form-control operate" data-name="createtime" value="RANGE" readonly="">
                <input type="text" class="form-control datetimerange" name="time_statistics" value="" id="time_statistics" data-index="12" onfocus="getdaterangepicker(form)" autocomplete="off" placeholder="请填写日期（筛选时优先级最高）">
            </div>
            {if $admin.report_auth == 1}
                <div class="col-xs-3">
                    <select name="row[admin_id]" id="c-admin_id" class="form-control selectpicker">
                        <option value="0" selected >所有</option>
                        {foreach name="arr_admin" item="vo"}
                        <option value="{$vo.id}">{$vo.nickname}</option>
                        {/foreach}
                    </select>
                </div>
            {/if}
            <div class="col-xs-3">
                <button type="button" id="statistics" class="btn btn-success" formnovalidate="">提交</button>
                <button type="reset" class="btn btn-default">重置</button>
            </div>
            <div class="col-xs-10">
                <p style="margin:10px 0 0 0;">当前美国时区:(-5:00),对应时间:<span id="time_statistics_usa">{$usatime}</span></p>
            </div>
        </div>
    </form>
</div>
<div class="row">
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua">
            <div class="inner">
                <h3 id="ajax_single_quantity">0</h3>

                <p>总订单数量(API实时统计)</p>
            </div>
            <div class="icon">
                <i class="fa fa-shopping-cart"></i>
            </div>
            <a href="feditionreport" target="_self" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-green">
            <div class="inner">
                <!--<sup style="font-size: 20px">%</sup>-->
                <h3 id="ajax_sales">0</h3>

                <p>销售总金额(API实时统计)</p>
            </div>
            <div class="icon">
                <i class="fa fa-area-chart"></i>
            </div>
            <a href="feditionreport" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-yellow">
            <div class="inner">
                <h3 id="ajax_advertising">0</h3>

                <p>广告消耗</p>
            </div>
            <div class="icon">
                <i class="fa fa-users"></i>
            </div>
            <a href="feditionreport" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-red">
            <div class="inner">
                <h3 id="ajax_amount">0</h3>

                <p>ROI比值</p>
            </div>
            <div class="icon">
                <i class="fa fa-user"></i>
            </div>
            <a href="feditionreport" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
</div>
<!-- /.row -->
<!--新增排行榜-->
<!--<div class="row" style="margin: auto;background-color: #fff;padding: 10px;">-->
    <!--<section class="col-lg-12 connectedSortable">-->
        <!--<div class="panel-body" >-->
            <!--<div id="myTabContent" class="tab-content">-->
                <!--<div class="tab-pane fade active in" id="one">-->
                    <!--<div class="widget-body no-padding">-->
                        <!--<div id="toolbar" class="toolbar">-->
                            <!--<a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>-->
                        <!--</div>-->
                        <!--<table id="table" class="table table-striped table-bordered table-hover table-nowrap"-->
                               <!--data-operate-edit="{:$auth->check('feditionstatisticsshopify/edit')}"-->
                               <!--data-operate-del=""-->
                               <!--width="100%">-->
                        <!--</table>-->
                    <!--</div>-->
                <!--</div>-->

            <!--</div>-->
        <!--</div>-->
    <!--</section>-->
<!--</div>-->
<!--新增排行榜-->
<!-- Main row -->
<div class="row" style="margin:15px 0 20px 0;">
    <!-- Left col -->
    <section class="col-lg-12 connectedSortable">
        <!-- Custom tabs (Charts with tabs)-->
        <div class="nav-tabs-custom charts-custom">
            <!-- Tabs within a box -->
            <ul class="nav nav-tabs pull-right">
                <div style="padding: 2% 0 2% 0;background-color: #fff;">
                    <form class="form-horizontal form-commonsearch nice-validator n-default n-bootstrap" novalidate="" method="post" action="" id="">
                        <div style="overflow: hidden;">
                            <div class="col-xs-5">
                                <input type="hidden" class="form-control operate" name="" data-name="createtime" value="RANGE" readonly="">
                                <input type="text" class="form-control datetimerange" name="time_sales" value="" id="time_sales" data-index="12" onfocus="getdaterangepicker(form)" autocomplete="off" placeholder="请填写日期（筛选时优先级最高）">
                            </div>
                            {if $admin.report_auth == 1}
                            <div class="col-xs-3">
                                <select name="row[admin_id2]" id="c-admin_id2" class="form-control selectpicker">
                                    <option value="0" selected >所有</option>
                                    {foreach name="arr_admin" item="vo"}
                                    <option value="{$vo.id}">{$vo.nickname}</option>
                                    {/foreach}
                                </select>
                            </div>
                            {/if}
                            <div class="col-xs-3">
                                <button type="button" class="btn btn-success" formnovalidate="" id="sales">提交</button>
                                <button type="reset" class="btn btn-default">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <li class="pull-left header"><i class="fa fa-inbox"></i> 销售趋势</li>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <div class="chart tab-pane active" id="line-chart" style="position: relative; height: 300px;"></div>
            </div>
        </div>
        <!-- /.nav-tabs-custom -->
    </section>
    {if $admin.report_auth == 1}
        <section class="col-lg-12 connectedSortable">
        <!-- Custom tabs (Charts with tabs)-->
        <div class="nav-tabs-custom charts-custom">
            <!-- Tabs within a box -->
            <ul class="nav nav-tabs pull-right">
                <div style="padding: 2% 0 2% 0;background-color: #fff;">
                    <form class="form-horizontal form-commonsearch nice-validator n-default n-bootstrap" novalidate="" method="post" action="" id="">
                        <div style="overflow: hidden;">
                            <div class="col-xs-5">
                                <input type="hidden" class="form-control operate" name="" data-name="createtime" value="RANGE" readonly="">
                                <input type="text" class="form-control datetimerange" name="time_ranking" value="{$time_ranking}" id="time_ranking" data-index="12" onfocus="getdaterangepicker(form)" autocomplete="off" placeholder="请填写日期（筛选时优先级最高）">
                            </div>
                            <div class="col-xs-5">
                                <button type="button" class="btn btn-success" formnovalidate="" id="ranking">提交</button>
                                <button type="reset" class="btn btn-default">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <li class="pull-left header"><i class="fa fa-inbox"></i> 销售排行</li>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <div class="chart tab-pane active" id="bar-chart" style="position: relative; height: 600px;"></div>
            </div>
        </div>
        <!-- /.nav-tabs-custom -->
    </section>
    {/if}

</div>
<!-- /.row (main row) -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
<script>
    function getdaterangepicker(form) {
        //绑定日期时间元素事件
        if ($(".datetimerange", form).size() > 0) {
            require(['bootstrap-daterangepicker'], function () {
                var ranges = {};
                ranges[__('Today')] = [Moment().startOf('day'), Moment().endOf('day')];
                ranges[__('Yesterday')] = [Moment().subtract(1, 'days').startOf('day'), Moment().subtract(1, 'days').endOf('day')];
                ranges[__('Last 7 Days')] = [Moment().subtract(6, 'days').startOf('day'), Moment().endOf('day')];
                ranges[__('Last 30 Days')] = [Moment().subtract(29, 'days').startOf('day'), Moment().endOf('day')];
                ranges[__('This Month')] = [Moment().startOf('month'), Moment().endOf('month')];
                ranges[__('Last Month')] = [Moment().subtract(1, 'month').startOf('month'), Moment().subtract(1, 'month').endOf('month')];
                var options = {
                    timePicker: false,
                    autoUpdateInput: false,
                    timePickerSeconds: true,
                    timePicker24Hour: true,
                    autoApply: true,
                    locale: {
                        format: 'YYYY-MM-DD HH:mm:ss',
                        customRangeLabel: __("Custom Range"),
                        applyLabel: __("Apply"),
                        cancelLabel: __("Clear"),
                    },
                    ranges: ranges,
                };
                var origincallback = function (start, end) {
                    $(this.element).val(start.format(this.locale.format) + " - " + end.format(this.locale.format));
                    $(this.element).trigger('blur');
                };
                $(".datetimerange", form).each(function () {
                    var callback = typeof $(this).data('callback') == 'function' ? $(this).data('callback') : origincallback;
                    $(this).on('apply.daterangepicker', function (ev, picker) {
                        callback.call(picker, picker.startDate, picker.endDate);
                    });
                    $(this).on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('').trigger('blur');
                    });
                    $(this).daterangepicker($.extend(true, options, $(this).data()), callback);
                });
            });
        }
    }
</script>

